import { runInAction } from 'mobx'
import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'
import { Form, Button, Steps, Input, message } from 'antd'
import { withRouter } from 'react-router-dom'
import { cloneDeep } from 'lodash' 

import styles from './ArticleCreate.less'
import FirstStepView from './FirstStepView'
import SecondStepView from './SecondStepView'
import ThirdStepView from './ThirdStepView'
import moment from 'moment'
import parse from 'url-parse'

const Step = Steps.Step;


@withRouter
@inject('articleCreate')
@observer
class ArticleCreate extends Component {
	constructor(props) {
		super(props)
		this.articleCreate = this.props.articleCreate
	}

	componentDidMount() {
		// 获取标签列表数据
		this.articleCreate.doGetTagList()
		let { query } = parse(this.props.location.search, true)
		
		runInAction(() => {
			console.log(query.type)
			this.articleCreate.type = query.type
			this.articleCreate.fuhtml = ''
			this.articleCreate.form.articleCreateTime = moment().format('YYYY-MM-DD HH:mm:ss')
			console.log(this.articleCreate.form.articleCreateTime, '当前时间格式化')
		})

		// 判断是从哪里跳转过来的，如果是查看编辑的话，需要获取数据
		if(query.type === 'edit' || query.type === 'detail') {
			this.articleCreate.doDetailArticle({_id: query.id})
			if(query.type === 'detail') {
				runInAction(() => {
					this.articleCreate.current = 2
				})
			}
		}
	}

	componentWillUnmount() {
		console.log('xiaohui')
		runInAction(() => {
			this.articleCreate.current = 0
			this.articleCreate.type = ''
			this.articleCreate.form = cloneDeep(this.articleCreate.defaultform)
		})
	}

	prev = () => {
		runInAction(() => {
			this.articleCreate.current = this.articleCreate.current - 1
		})
	}

	next = () => {
		runInAction(() => {
			this.articleCreate.current = this.articleCreate.current + 1
		})
	}


	render() {

		const steps = this.articleCreate.steps
		const current = this.articleCreate.current

		return (
			<div className="box">
				<div className="shadow"></div>
				<div className="content">
					<div>
		        <Steps current={current}>
		          {steps.map(item => <Step key={item.title} title={item.title} />)}
		        </Steps>
		        <div className={styles.stepsContent}>
							{ current === 0 && <FirstStepView></FirstStepView> }
							{	current === 1 && <SecondStepView></SecondStepView> }
							{	current === 2 && <ThirdStepView></ThirdStepView> }
		        </div>

		        { this.articleCreate.type === 'detail' &&
							<div className={styles.stepsAction}>
								<Button type="primary" onClick={() => {this.props.history.push('/articleMgmt/articleList')}}>返回</Button>
							</div>
		      	}
		      	{
		      		this.articleCreate.type === 'edit' &&
		      		<div className={styles.stepsAction}>
								{ current < steps.length - 1 && <Button type="primary" onClick={() => {this.next()}}>下一步</Button> }
			          { current === steps.length - 1 && <Button type="primary" onClick={() => {
			          	this.props.articleCreate.doUpdateArticle().then((res) => {
			          		this.props.history.push('/articleMgmt/articleList')
			          	})
			          }}>提交更改</Button> }
			          { current > 0 && <Button style={{ marginLeft: 8 }} onClick={() => {this.prev()}}>上一步</Button> }
			          <Button type="primary" style={{float: 'right'}} onClick={() => {this.props.history.push('/articleMgmt/articleList')}}>取消</Button>
							</div>
		      	}
		        {
		        	this.articleCreate.type === 'create' && 
		        	<div className={styles.stepsAction}>
			          { current < steps.length - 1 && <Button type="primary" onClick={() => {this.next()}}>下一步</Button> }
			          { current === steps.length - 1 && <Button type="primary" onClick={() => {this.props.articleCreate.doAddArticle().then((res) => {
			          	this.props.history.push('/articleMgmt/articleList')
			          })}}>发布文章</Button> }
			          { current > 0 && <Button style={{ marginLeft: 8 }} onClick={() => {this.prev()}}>上一步</Button> }
			          <Button type="primary" style={{float: 'right'}} onClick={() => {this.props.history.push('/articleMgmt/articleList')}}>取消</Button>
			        </div>
		        }
		      </div>
				</div>
			</div>
		)
	}
}

export default ArticleCreate